React Native এ Native Modules এবং Native Code Integration

React Native একটি ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্ক, যা মোবাইল অ্যাপ্লিকেশন তৈরি করার জন্য JavaScript ব্যবহার করে। তবে, কিছু ক্ষেত্রে Native Modules এবং Native Code Integration এর প্রয়োজন হয় যখন আপনার অ্যাপে কিছু নির্দিষ্ট নেটিভ প্ল্যাটফর্ম ফিচার ব্যবহার করার প্রয়োজন হয়, যেমন Bluetooth, GPS, Camera, Native UI Components, অথবা বিশেষ ফিচার যা React Native এর দ্বারা সরাসরি সমর্থিত নয়।

Native Modules React Native অ্যাপে Java (Android) বা Objective-C/Swift (iOS) কোডকে JavaScript এর সাথে সংযুক্ত করার জন্য ব্যবহৃত হয়। এটি React Native অ্যাপ্লিকেশনের জন্য নেটিভ ফিচার এবং কার্যকারিতা যোগ করতে সাহায্য করে।

React Native Native Modules: কী, কেন, এবং কিভাবে

Native Modules হচ্ছে JavaScript এর মাধ্যমে Native Code (Java বা Objective-C/Swift) কল করার একটি উপায়, যা React Native অ্যাপে কিছু ফিচারকে এনাবল করতে সাহায্য করে। যখন React Native এর built-in API-তে একটি ফিচার বা ফাংশনালিটি উপস্থিত না থাকে, তখন Native Modules ব্যবহার করা হয়।

কীভাবে Native Modules কাজ করে?

Native Modules দুইটি অংশে কাজ করে:

1. Native Code: আপনি Native Android বা iOS কোড লিখে সেই কোডের কার্যকারিতা (ফাংশন) তৈরি করেন।
2. JavaScript Bridge: React Native JavaScript কোড এবং Native কোডের মধ্যে যোগাযোগের জন্য ব্রিজ তৈরি করে।

এই Native Module তৈরি করতে, আপনি একটি নতুন মডিউল তৈরি করবেন যা JavaScript কোডের সাথে কাজ করতে পারে এবং এটি Native API বা নেটিভ ফাংশনগুলো কল করবে।

Native Modules তৈরি করার ধাপ

১. Android এ Native Module তৈরি করা

React Native এ Android এর জন্য Native Module তৈরি করতে আপনাকে Java কোড লিখতে হবে।

১.১ Native Module Java কোড লিখুন

প্রথমে আপনার React Native প্রজেক্টে Native Module যোগ করতে হবে। Android এর জন্য Native Module তৈরি করতে নিম্নলিখিত স্টেপগুলো অনুসরণ করুন:

1. Native Module ক্লাস তৈরি করুন:

MyNativeModule.java:

package com.myrnapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyNativeModule extends ReactContextBaseJavaModule {

  MyNativeModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "MyNativeModule"; // মডিউলের নাম
  }

  @ReactMethod
  public void showMessage(String message) {
    // Native কোড (যেমন: Toast বা Dialog) ব্যবহার করতে পারেন
    Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show();
  }
}

১.২ Native Module প্যাকেজ তৈরি করুন

প্যাকেজ তৈরি করে React Native এর সাথে Native Module এর ব্রিজ তৈরি করতে হবে।

MyNativeModulePackage.java:

package com.myrnapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactNativeHost;
import com.facebook.react.bridge.ReactInstanceManager;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.uimanager.ViewManager;
import java.util.Collections;
import java.util.List;

public class MyNativeModulePackage implements ReactPackage {

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    return Collections.singletonList(new MyNativeModule(reactContext));
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

১.৩ MainApplication.java এ প্যাকেজ যুক্ত করুন

MainApplication.java এ আপনার Native Module প্যাকেজ যোগ করুন:

import com.myrnapp.MyNativeModulePackage; // প্যাকেজ ইম্পোর্ট করুন

public class MainApplication extends Application implements ReactApplication {

  @Override
  public List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MyNativeModulePackage() // Native Module প্যাকেজ যোগ করুন
    );
  }
}

২. JavaScript এ Native Module ব্যবহার করা

JavaScript থেকে Native Module ব্যবহার করার জন্য React Native এর NativeModules API ব্যবহার করতে হবে।

import { NativeModules } from 'react-native';

// Native Module এর ফাংশন ব্যবহার করুন
const { MyNativeModule } = NativeModules;

// Native Module এর showMessage ফাংশন কল করুন
MyNativeModule.showMessage('Hello from Native Module!');

iOS এ Native Module তৈরি করা

iOS এ Native Module তৈরি করতে, আপনাকে Objective-C অথবা Swift ব্যবহার করতে হবে। নিচে Objective-C কোডের উদাহরণ দেয়া হলো:

২.১ Native Module Objective-C কোড লিখুন

MyNativeModule.m:

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(MyNativeModule, NSObject)

RCT_EXTERN_METHOD(showMessage:(NSString *)message)

@end

MyNativeModule.swift:

import Foundation
@objc(MyNativeModule)
class MyNativeModule: NSObject {
  
  @objc func showMessage(_ message: String) {
    print(message)
  }
}

২.২ React Native JavaScript কোডে Native Module ব্যবহার

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.showMessage('Hello from Native Module!');

Native Code Integration

React Native আপনাকে Native Code ইন্টিগ্রেট করতে দেয়, যাতে আপনি Android এবং iOS এর জন্য নেটিভ ফিচারগুলো ব্যবহার করতে পারেন। কিছু সাধারণ Native Code ইন্টিগ্রেশনের ক্ষেত্রে:

1. Camera API: Native Camera API ইন্টিগ্রেট করার জন্য react-native-camera বা react-native-image-picker ব্যবহার করা হয়।
2. Bluetooth Integration: React Native অ্যাপে Bluetooth এর সাথে কাজ করতে react-native-ble-manager বা react-native-bluetooth-serial ব্যবহার করা হয়।
3. Native UI Components: React Native অ্যাপের জন্য কাস্টম নেটিভ UI কম্পোনেন্ট তৈরি করতে, আপনাকে Native Views তৈরি করতে হবে যা React Native অ্যাপের মধ্যে প্রদর্শিত হবে।

Native Code Integration উদাহরণ

Native Module দিয়ে Camera Access

• Android এর জন্য, আপনি Native Java কোড ব্যবহার করে ক্যামেরা এক্সেস করতে পারবেন। একইভাবে iOS এ AVFoundation ব্যবহার করে ক্যামেরা এক্সেস করতে পারবেন।

Bluetooth Integration (Android/iOS)

• Bluetooth সংযোগ এবং ডেটা প্রেরণ করতে, React Native অ্যাপে Native Code দিয়ে Bluetooth module যোগ করা হয়। react-native-ble-manager ব্যবহার করে Bluetooth ডিভাইসের সাথে যোগাযোগ করা যায়।

সারাংশ

• Native Modules React Native অ্যাপে নেটিভ ফিচার এবং API ইন্টিগ্রেট করতে ব্যবহৃত হয়। এটি Java বা Objective-C/Swift কোডের সাথে JavaScript কোডের ব্রিজ তৈরি করে।
• Native Modules ব্যবহার করার মাধ্যমে আপনি React Native অ্যাপের পারফরম্যান্স এবং কার্যকারিতা বাড়াতে পারবেন, যেহেতু আপনি React Native এর পারফরম্যান্স সীমাবদ্ধতা এড়িয়ে যেতে পারবেন।
• Native Modules তৈরি করতে, আপনাকে Native কোডে কিছু ফাংশনালিটি লিখতে হবে এবং সেটি React Native JavaScript কোডের সাথে সংযুক্ত করতে হবে।

Native Code Integration এর মাধ্যমে আপনি React Native অ্যাপে কাস্টম নেটিভ ফিচার যোগ করতে পারবেন এবং সেরা পারফরম্যান্স সহ পূর্ণাঙ্গ অ্যাপ্লিকেশন তৈরি করতে পারবেন।

Native Modules হল React Native অ্যাপ্লিকেশন তৈরির একটি গুরুত্বপূর্ণ অংশ, যা JavaScript এবং Native Code (যেমন Java, Objective-C, Swift বা C++) এর মধ্যে যোগাযোগ স্থাপন করতে ব্যবহৃত হয়। React Native মূলত JavaScript এবং React ব্যবহার করে মোবাইল অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে, তবে অনেক সময় অ্যাপ্লিকেশনের জন্য Native Features বা Native API ব্যবহার করার প্রয়োজন হয়, যেগুলি সরাসরি JavaScript দ্বারা অ্যাক্সেস করা সম্ভব নয়। এই অবস্থায় Native Modules কাজ আসে, যেখানে আপনি JavaScript থেকে Native কোডের মধ্যে যোগাযোগ করতে পারেন।

Native Modules অ্যাপ্লিকেশনকে native code ব্যবহার করে এমন ক্ষমতা প্রদান করে, যেমন:

• Camera Access
• Bluetooth
• GPS Location Services
• Push Notifications

React Native অ্যাপ্লিকেশনে Native Modules ব্যবহার করলে, আপনি JavaScript কোডে থাকা কম্পোনেন্টের সাথে Native কোডের অপারেশন করতে সক্ষম হন।

Native Modules কিভাবে কাজ করে?

React Native অ্যাপ্লিকেশনে Native Modules কার্যকরীভাবে কাজ করতে দুটি প্রধান উপাদান রয়েছে:

1. JavaScript Side (Bridge)
2. Native Side

১. JavaScript Side (Bridge):

React Native অ্যাপ্লিকেশন JavaScript থ্রেডে চলে, এবং Native Modules ব্যবহার করার জন্য Bridge নামে একটি asynchronous communication layer থাকে যা JavaScript এবং Native কোডের মধ্যে যোগাযোগ সরবরাহ করে। এই ব্রিজের মাধ্যমে JavaScript থ্রেড এবং Native থ্রেডের মধ্যে ডেটা ট্রান্সফার হয়।

• JavaScript থ্রেড থেকে native functionality কল করতে, আপনি Native Modules এর methods কল করেন।
• React Native Bridge মূলত JSON-based messages ব্যবহার করে Native কোডের সাথে যোগাযোগ স্থাপন করে।

২. Native Side:

Native Side হল Java, Objective-C, Swift, C++ বা অন্যান্য native কোডের থ্রেড, যেখানে অ্যাপের বিভিন্ন native capabilities (যেমন, Camera, Location, Sensor API ইত্যাদি) কার্যকর করা হয়। JavaScript থেকে Native কোডে একটি মেসেজ পাঠানোর পর, Native কোড সেই মেসেজ প্রক্রিয়া করে এবং তার ফলাফল JavaScript থ্রেডে পাঠায়।

React Native এ Native Module তৈরি করার সময় আপনি bridge এর মাধ্যমে দুইটি সিস্টেমের মধ্যে asynchronous ডেটা আদান-প্রদান নিশ্চিত করেন।

Native Module কিভাবে তৈরি করা হয়?

React Native অ্যাপে Native Module তৈরি করতে, আপনাকে Native কোড (যেমন, Java বা Objective-C) লিখতে হবে এবং সেগুলি JavaScript এর সাথে bridge করতে হবে।

১. Native Module (Java) Example for Android

Step 1: Android এর জন্য Native Module তৈরি করতে, প্রথমে আপনার React Native প্রোজেক্টে Java ফাইল তৈরি করুন।

// MyModule.java
package com.myapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyModule extends ReactContextBaseJavaModule {

  public MyModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "MyModule";
  }

  @ReactMethod
  public void showMessage(String message) {
    // Your native logic here
    System.out.println("Native message: " + message);
  }
}

Step 2: এখন আপনি React Native Bridge ব্যবহার করে JavaScript থেকে Native module এ কল করতে পারবেন।

import { NativeModules } from 'react-native';

const { MyModule } = NativeModules;

MyModule.showMessage('Hello from Java!');

২. Native Module (Objective-C) Example for iOS

Step 1: Objective-C এর জন্য Native Module তৈরি করতে, আপনি একটি ফাইল তৈরি করতে পারেন:

// MyModule.m
#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(MyModule, NSObject)

RCT_EXTERN_METHOD(showMessage:(NSString *)message)

@end

Step 2: JavaScript থেকে Native module এ কল করতে:

import { NativeModules } from 'react-native';

const { MyModule } = NativeModules;

MyModule.showMessage('Hello from Objective-C!');

Native Module এর ব্যবহার:

• Device Features Access: আপনি Native Modules এর মাধ্যমে ডিভাইসের কম্পন ফিচার, ক্যামেরা, GPS, বা সেন্সর অ্যাক্সেস করতে পারেন, যেগুলি React Native এর মাধ্যমে সরাসরি সম্ভব নয়।
• Performance Boost: জটিল গণনা বা কাজ যা JavaScript thread থেকে করা সম্ভব নয় বা অতি ধীর হতে পারে, Native Modules ব্যবহার করে তা Native code এ স্থানান্তর করা যেতে পারে, যাতে পারফরম্যান্স উন্নত হয়।
• Third-party Libraries: অনেক সময় বাইরের লাইব্রেরি বা SDK যেমন Google Maps SDK, Bluetooth API, Push Notification services ইত্যাদি ব্যবহার করতে Native Modules এর প্রয়োজন হয়।

Native Modules এর সুবিধা ও সীমাবদ্ধতা

সুবিধা:

1. Native Capabilities Access: React Native অ্যাপ্লিকেশন থেকে Native প্ল্যাটফর্মের সম্পূর্ণ ক্ষমতা অ্যাক্সেস করা সম্ভব হয়।
2. Performance: Native কোড সাধারণত JavaScript এর থেকে দ্রুত কাজ করে, তাই পারফরম্যান্সের জন্য উপযোগী।
3. Custom Features: আপনার অ্যাপের জন্য কাস্টম ফিচার তৈরি করা সহজ হয়, যেমন, আপনার নিজস্ব sensor API বা library তৈরি করা।

সীমাবদ্ধতা:

1. Complexity: Native modules তৈরি করা কিছুটা জটিল হতে পারে এবং JavaScript এর সাথে ব্রিজ তৈরি করার সময় কোড বেস বড় হতে পারে।
2. Platform-specific Code: React Native এর জন্য আলাদা আলাদা Native কোড (Java, Objective-C/Swift) লিখতে হয়, যা ডেভেলপমেন্ট এবং মেইনটেনেন্সকে জটিল করে।
3. Cross-platform Compatibility: Native কোডে কিছু প্ল্যাটফর্ম স্পেসিফিক কোড থাকতে পারে, তাই একই কোড একাধিক প্ল্যাটফর্মে ব্যবহার করা কঠিন হতে পারে।

সারাংশ

Native Modules React Native এর একটি শক্তিশালী ফিচার যা JavaScript এবং Native Code এর মধ্যে যোগাযোগ স্থাপন করে। এর মাধ্যমে আপনি মোবাইল ডিভাইসের native ফিচার এবং API অ্যাক্সেস করতে পারেন। Native Modules ব্যবহারের মাধ্যমে অ্যাপ্লিকেশন পারফরম্যান্স বৃদ্ধি পায় এবং আপনি Native Features এর সুবিধা নিতে পারেন। তবে, এটি কিছুটা জটিল এবং প্ল্যাটফর্ম স্পেসিফিক কোড লেখার প্রয়োজন পড়ে।

React Native আপনাকে JavaScript কোডের মাধ্যমে মোবাইল অ্যাপ তৈরি করার সুবিধা দেয়, তবে কখনও কখনও আপনার অ্যাপের জন্য নেটিভ ফিচার বা কাস্টম কোড প্রয়োজন হতে পারে যা React Native সরাসরি সাপোর্ট করে না। এই ক্ষেত্রে, আপনি Custom Native Modules তৈরি করতে পারেন যা JavaScript থেকে নেটিভ কোড (Java বা Swift/Objective-C) কল করার সুযোগ দেয়।

এখানে, আমরা Android এবং iOS এর জন্য কাস্টম নেটিভ মডিউল তৈরি করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করব।

১. Android এর জন্য Custom Native Module তৈরি

Step 1: নতুন Native Module তৈরি করা

1. প্রথমে, React Native Project তৈরি করুন (যদি না থাকে)।

2. android/app/src/main/java/com/{project_name}/ ডিরেক্টরিতে একটি নতুন জাভা ক্লাস তৈরি করুন, যেমন MyCustomModule.java:

   package com.myapp;
   
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.ReactMethod;
   
   public class MyCustomModule extends ReactContextBaseJavaModule {
   
       MyCustomModule(ReactApplicationContext reactContext) {
           super(reactContext);
       }
   
       @Override
       public String getName() {
           return "MyCustomModule";  // মডিউলের নাম
       }
   
       // Custom method for JavaScript to call
       @ReactMethod
       public void showMessage(String message) {
           // এখানে আপনার কাস্টম কোড থাকবে, যেমন একটি Toast মেসেজ
           Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show();
       }
   }

Step 2: মডিউলটি রেজিস্টার করা

1. MainApplication.java ফাইলে, মডিউলটি রেজিস্টার করুন:

   import com.myapp.MyCustomModule;  // আপনার মডিউল ইম্পোর্ট করুন
   
   @Override
   public List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
               new MyCustomPackage()  // আপনার কাস্টম প্যাকেজটি যুক্ত করুন
       );
   }

2. নতুন প্যাকেজ ক্লাস তৈরি করুন যা MyCustomModule রেজিস্টার করবে:

   package com.myapp;
   
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactPackage;
   import com.facebook.react.bridge.NativeModule;
   import com.facebook.react.bridge.NativeModuleRegistry;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.JavaScriptModule;
   import com.facebook.react.uimanager.ViewManager;
   
   import java.util.ArrayList;
   import java.util.Collections;
   import java.util.List;
   
   public class MyCustomPackage implements ReactPackage {
   
       @Override
       public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
           List<NativeModule> modules = new ArrayList<>();
           modules.add(new MyCustomModule(reactContext)); // কাস্টম মডিউল যোগ করুন
           return modules;
       }
   
       @Override
       public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
   }

Step 3: JavaScript থেকে মডিউল ব্যবহার করা

1. JavaScript কোডে, আপনার কাস্টম মডিউল ব্যবহার করতে হবে:

   import { NativeModules } from 'react-native';
   
   const { MyCustomModule } = NativeModules;
   
   // মডিউল ব্যবহার করুন
   MyCustomModule.showMessage('Hello from Native Android!');

২. iOS এর জন্য Custom Native Module তৈরি

Step 1: নতুন Native Module তৈরি করা

1. iOS অ্যাপের মধ্যে নতুন একটি Objective-C বা Swift ক্লাস তৈরি করুন। এখানে Objective-C উদাহরণ দেখানো হলো।

2. ios/{project_name}/ ডিরেক্টরিতে একটি নতুন .m ফাইল তৈরি করুন, যেমন MyCustomModule.m:

   #import <React/RCTBridgeModule.h>
   
   @interface MyCustomModule : NSObject <RCTBridgeModule>
   @end
   
   @implementation MyCustomModule
   
   // React Native থেকে কল করা যাবে এমন method তৈরি করুন
   RCT_EXPORT_MODULE();
   
   RCT_EXPORT_METHOD(showMessage:(NSString *)message)
   {
       UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Message"
                                                                      message:message
                                                               preferredStyle:UIAlertControllerStyleAlert];
       UIAlertAction *defaultAction = [UIAlertAction actionWithTitle:@"OK"
                                                             style:UIAlertActionStyleDefault
                                                           handler:nil];
       [alert addAction:defaultAction];
       UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController;
       [rootViewController presentViewController:alert animated:YES completion:nil];
   }
   
   @end

Step 2: AppDelegate.m এ মডিউল রেজিস্টার করা

1. AppDelegate.m ফাইলে এই মডিউল রেজিস্টার করতে হবে:

   #import "MyCustomModule.h"  // মডিউল ইম্পোর্ট করুন
   
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
       // ...
       return YES;
   }

Step 3: JavaScript থেকে মডিউল ব্যবহার করা

1. JavaScript কোডে, iOS কাস্টম মডিউল ব্যবহার করুন:

   import { NativeModules } from 'react-native';
   
   const { MyCustomModule } = NativeModules;
   
   // মডিউল কল করা
   MyCustomModule.showMessage('Hello from Native iOS!');

সারাংশ

• Custom Native Modules React Native এর একটি শক্তিশালী ফিচার যা আপনাকে Java (Android) অথবা Objective-C/Swift (iOS) কোড লিখে React Native অ্যাপে নেটিভ ফিচার যোগ করতে সহায়ক।
• Android এবং iOS উভয়ের জন্য কাস্টম মডিউল তৈরি করতে আপনাকে নেটিভ কোড লিখতে হবে এবং সেটি React Native এর JavaScript কোডের সাথে সংযুক্ত করতে হবে।
• আপনি NativeModules ব্যবহার করে আপনার কাস্টম মডিউলটি React Native অ্যাপে কল করতে পারেন।

এভাবে, আপনি Android এবং iOS উভয় প্ল্যাটফর্মের জন্য কাস্টম ফিচার এবং নেটিভ কোড পরিচালনা করতে পারেন।

React Native একটি ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্ক, যা আপনাকে JavaScript দিয়ে মোবাইল অ্যাপ্লিকেশন তৈরি করতে সহায়ক। তবে, কিছু ক্ষেত্রে Native Code এর ব্যবহার প্রয়োজন হতে পারে (যেমন ফাইল সিস্টেম অ্যাক্সেস, ক্যামেরা, সেন্সর ডেটা, পারফরম্যান্স-অভিযোজিত ফিচার ইত্যাদি)। এখানে React Native Bridge ব্যবহার করা হয়, যা Native Modules এবং JavaScript এর মধ্যে যোগাযোগ স্থাপন করে।

React Native Bridge মূলত JavaScript Thread এবং Native Modules (iOS এবং Android-এর মধ্যে) এর মধ্যে যোগাযোগের মাধ্যম হিসেবে কাজ করে। এটি Native কোড এবং JavaScript কোডের মধ্যে ডেটা এবং ফাংশন পাঠানোর জন্য প্রয়োজনীয় সেতু সরবরাহ করে।

React Native Bridge কীভাবে কাজ করে?

React Native এর Bridge একটি asynchronous communication model ব্যবহার করে, যা JavaScript Thread এবং Native Modules এর মধ্যে ডেটা এবং ফাংশন পাঠাতে সক্ষম করে।

React Native Bridge এর মূল কাঠামো:

1. JavaScript Thread: এটি হলো React Native অ্যাপ্লিকেশনের প্রধান থ্রেড, যা UI রেন্ডার এবং JS কোড এক্সিকিউট করে।
2. Native Thread: এটি হলো মূল native কোডের থ্রেড (iOS এর জন্য Objective-C/Swift, Android এর জন্য Java/Kotlin), যা native APIs এবং ডিভাইসের হার্ডওয়্যার অ্যাক্সেস করে।
3. Bridge: JavaScript এবং Native Thread এর মধ্যে যোগাযোগের মাধ্যম। এটি data transfer এবং function calls পরিচালনা করে।

JavaScript থ্রেড এবং Native থ্রেড একে অপরের সাথে Bridge এর মাধ্যমে যোগাযোগ করে। JavaScript থ্রেড যখন কোনো native কোড বা ফিচারের অনুরোধ করে, তখন এটি Bridge এর মাধ্যমে native থ্রেডে প্রেরিত হয়। native কোড তার কাজ শেষ করে পুনরায় Bridge এর মাধ্যমে JavaScript থ্রেডে ফিরে আসে।

React Native Bridge এর মাধ্যমে Native Code এবং JS Code সংযোগ

Step-by-Step Process:

1. Bridge Interface তৈরি করা: Native কোডে একটি Interface তৈরি করতে হবে, যা JavaScript থেকে কল করা যাবে।
2. Native Module তৈরি করা: Native কোডে একটি Module তৈরি করতে হবে যা JavaScript থ্রেড থেকে কল করা যাবে।
3. JavaScript থেকে Native Function কল করা: Native মডিউল থেকে ফাংশন বা ডেটা অ্যাক্সেস করতে JavaScript থেকে কল করতে হবে।
4. Callback ব্যবহার করা: Native কোড থেকে JavaScript থ্রেডে ডেটা বা ফলাফল পাঠানোর জন্য Callback ব্যবহার করা হয়।

1. Native Module তৈরি করা (iOS)

iOS এর জন্য Objective-C বা Swift ব্যবহার করে Native Module তৈরি করা যায়।

Example: iOS Native Module

1. Create a Native Module:
   • প্রথমে Objective-C ফাইলে একটি নতুন মডিউল তৈরি করুন, যেমন MyNativeModule.m।

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(MyNativeModule, NSObject)

RCT_EXTERN_METHOD(addNumbers:(NSInteger)a b:(NSInteger)b callback:(RCTResponseSenderBlock)callback)

@end

2. Implement the Native Functionality (Objective-C):

#import "MyNativeModule.h"

@implementation MyNativeModule

// This function will be called from JS code
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(addNumbers:(NSInteger)a b:(NSInteger)b callback:(RCTResponseSenderBlock)callback)
{
  NSInteger sum = a + b;
  callback(@[[NSNull null], @(sum)]);
}

@end

2. JavaScript Code থেকে Native Function কল করা

JavaScript কোডে NativeModules থেকে Native Module ফাংশন কল করতে হবে।

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.addNumbers(5, 7, (error, result) => {
  if (error) {
    console.error(error);
  } else {
    console.log('Sum:', result); // Output will be 'Sum: 12'
  }
});

3. Native Module তৈরি করা (Android)

Android এর জন্য Java/Kotlin ব্যবহার করে Native Module তৈরি করা হয়।

Example: Android Native Module

1. Create a Native Module:
   • Android এর MyNativeModule.java ফাইল তৈরি করুন।

package com.mynativeapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactMethod;

public class MyNativeModule extends ReactContextBaseJavaModule {

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "MyNativeModule";
    }

    @ReactMethod
    public void addNumbers(int a, int b, Callback callback) {
        int sum = a + b;
        callback.invoke(null, sum); // Calling the callback with result
    }
}

2. Register the Native Module:
   • Native module-কে রেজিস্টার করতে হবে।

package com.mynativeapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.ReactNativeHost;
import com.facebook.react.bridge.ReactPackage;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyNativePackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyNativeModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

3. JavaScript Code থেকে Native Function কল করা:

import { NativeModules } from 'react-native';

const { MyNativeModule } = NativeModules;

MyNativeModule.addNumbers(5, 7, (error, result) => {
  if (error) {
    console.error(error);
  } else {
    console.log('Sum:', result); // Output will be 'Sum: 12'
  }
});

React Native Bridge এর সুবিধা

1. Native Functionality Access: React Native Bridge আপনাকে native কোড থেকে অতিরিক্ত ফিচারগুলো অ্যাক্সেস করার সুযোগ দেয়, যা React Native নিজে সরাসরি সাপোর্ট নাও করতে পারে।
2. Performance: Native কোডের মাধ্যমে পারফরম্যান্স-সেনসিটিভ ফিচার তৈরি করা যায়, যেমন উচ্চ গ্রাফিক্স রেন্ডারিং বা সিগন্যাল প্রসেসিং।
3. Reuse Native Code: বিদ্যমান native কোড ব্যবহার করতে পারবেন, ফলে নতুন React Native অ্যাপে পুরনো কোড পুনঃব্যবহার করা সম্ভব।
4. Cross-Platform Development: Native কোডের মাধ্যমে আপনাকে iOS এবং Android উভয়ের জন্য একই ফিচার তৈরি করতে সহায়তা করে।

সারাংশ

• React Native Bridge আপনাকে Native Modules এবং JavaScript কোডের মধ্যে যোগাযোগ স্থাপন করতে সাহায্য করে।
• Native Code থেকে JavaScript-এ ডেটা পাঠানোর জন্য Bridge ব্যবহার করা হয়।
• React Native অ্যাপ্লিকেশনগুলোতে Native Modules যুক্ত করে আপনি native APIs এবং পারফরম্যান্স-অভিযোজিত ফিচারগুলিকে JavaScript থ্রেড থেকে অ্যাক্সেস করতে পারেন।

Bridge ব্যবহারের মাধ্যমে আপনি Native কোড এবং JavaScript কোডের মধ্যে সেতুবন্ধন তৈরি করে React Native অ্যাপ্লিকেশনগুলিকে আরও শক্তিশালী এবং পরিপূর্ণ করতে পারেন।

React Native আপনাকে native libraries (যেমন Java, Swift, Objective-C, অথবা C++ এ লেখা) আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত করার সুবিধা দেয়, যা আপনাকে প্ল্যাটফর্ম-নির্দিষ্ট ফিচার বা ক্ষমতা ব্যবহার করতে সাহায্য করে যা JavaScript বা React Native এর কোর মডিউলে পাওয়া যায় না। এই ধরনের third-party native libraries আপনার অ্যাপের কার্যকারিতা বাড়াতে সক্ষম, যেমন push notifications, camera, GPS, payment, এবং আরও অনেক কিছু।

এখানে আমরা React Native অ্যাপে third-party native libraries ইন্টিগ্রেট করার ধাপগুলো নিয়ে আলোচনা করব।

Third-party Native Libraries ইন্টিগ্রেশন করার ধাপসমূহ

ধাপ ১: npm বা yarn দিয়ে লাইব্রেরি ইনস্টল করা

প্রথমে আপনাকে আপনার React Native প্রোজেক্টে third-party native লাইব্রেরি ইনস্টল করতে হবে, যেটি সাধারণত npm বা yarn এর মাধ্যমে করা হয়। বেশিরভাগ third-party native libraries npm প্যাকেজ প্রদান করে যা React Native এবং native কোডের মধ্যে একটি JavaScript ব্রিজ হিসেবে কাজ করে।

যেমন ধরুন, আপনি react-native-camera (ক্যামেরা ব্যবহারের জন্য একটি জনপ্রিয় লাইব্রেরি) ইন্টিগ্রেট করতে চান:

npm install react-native-camera --save

অথবা

yarn add react-native-camera

ধাপ ২: লাইব্রেরি লিঙ্ক করা

React Native 0.60 সংস্করণের আগে আপনাকে react-native link কমান্ড ব্যবহার করে ম্যানুয়ালি native মডিউলগুলো লিঙ্ক করতে হতো। তবে React Native 0.60 থেকে auto-linking ফিচার চালু করা হয়েছে, যা লাইব্রেরি ইনস্টল করার সাথে সাথে অটোমেটিকভাবে লিঙ্ক করে দেয়।

যদি আপনার প্রোজেক্ট পুরোনো সংস্করণের হয়, তাহলে ম্যানুয়ালি লিঙ্ক করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

react-native link react-native-camera

তবে React Native 0.60 বা তার পরবর্তী সংস্করণে লাইব্রেরি অটোমেটিকালি লিঙ্ক হয়ে যাবে।

ধাপ ৩: iOS এবং Android এর জন্য অতিরিক্ত কনফিগারেশন

কিছু libraries এর জন্য iOS বা Android-এ অতিরিক্ত কনফিগারেশন প্রয়োজন হতে পারে, বিশেষ করে যদি সেগুলি প্ল্যাটফর্ম-নির্দিষ্ট permissions বা অন্যান্য ডিপেন্ডেন্সির উপর নির্ভর করে।

• iOS: আপনি Xcode এ প্রোজেক্টটি ওপেন করে কিছু সেটিংস কনফিগার করতে পারেন।
  • Info.plist ফাইলের মধ্যে ক্যামেরা, লোকেশন, মাইক্রোফোন ইত্যাদি ব্যবহারের জন্য প্রয়োজনীয় অনুমতির সন্নিবেশ করা।

যেমন, ক্যামেরার জন্য Info.plist এ এই লাইনটি যোগ করুন:

<key>NSCameraUsageDescription</key>
<string>We need access to the camera for scanning barcodes.</string>

• Android: Android এ আপনাকে AndroidManifest.xml ফাইলেও কিছু পরিবর্তন করতে হতে পারে।
  • ক্যামেরা, লোকেশন ইত্যাদির জন্য প্রপার অনুমতিগুলো যোগ করতে হবে।

যেমন:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

ধাপ ৪: অ্যাপ পুনরায় বিল্ড করা

লাইব্রেরি লিঙ্ক এবং কনফিগারেশন করার পর আপনাকে অ্যাপটি পুনরায় বিল্ড করতে হবে।

iOS এর জন্য:

cd ios && pod install && cd ..
react-native run-ios

Android এর জন্য:

react-native run-android

ধাপ ৫: লাইব্রেরি ব্যবহার করা

এখন লাইব্রেরিটি ইনস্টল এবং কনফিগার করা হয়ে গেলে, আপনি সেই লাইব্রেরিটি আপনার React Native জাভাস্ক্রিপ্ট কোডে ব্যবহার করতে পারবেন। ধরুন, আপনি react-native-camera ব্যবহার করতে চান:

import React from 'react';
import { View, Text } from 'react-native';
import { RNCamera } from 'react-native-camera';

const CameraScreen = () => {
  let camera;

  const takePicture = async () => {
    if (camera) {
      const data = await camera.takePictureAsync();
      console.log(data.uri); // ছবি URI
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <RNCamera
        ref={(ref) => { camera = ref; }}
        style={{ flex: 1 }}
        type={RNCamera.Constants.Type.back}
        captureAudio={false}
      >
        <View>
          <Text onPress={takePicture}>Capture</Text>
        </View>
      </RNCamera>
    </View>
  );
};

export default CameraScreen;

ধাপ ৬: পারমিশন ম্যানেজমেন্ট

বেশিরভাগ third-party native libraries-এর জন্য ডিভাইসের হার্ডওয়্যার বা সেনসিটিভ ডেটার সাথে কাজ করার জন্য পারমিশন প্রয়োজন হয়। React Native ডিফল্টভাবে এই পারমিশনগুলি চায় না, তাই আপনাকে ম্যানুয়ালি পারমিশনগুলো নিয়ন্ত্রণ করতে হবে।

react-native-permissions লাইব্রেরি ব্যবহার করে আপনি পারমিশন ম্যানেজ করতে পারেন।

1. ইনস্টল করুন:

npm install react-native-permissions

2. কোডে পারমিশন রিকোয়েস্ট করা:

যেমন ক্যামেরা পারমিশন রিকোয়েস্ট করা:

import { PermissionsAndroid } from 'react-native';

async function requestCameraPermission() {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: 'Camera Permission',
        message: 'This app needs access to your camera.',
        buttonNeutral: 'Ask Me Later',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      },
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Camera permission granted');
    } else {
      console.log('Camera permission denied');
    }
  } catch (err) {
    console.warn(err);
  }
}

ধাপ ৭: Native মডিউল ডিবাগিং

Native লাইব্রেরি ইন্টিগ্রেট করার সময় আপনাকে JavaScript এবং Native কোড উভয়ের সাথে কাজ করতে হবে। যদি লাইব্রেরির সাথে ডিবাগিং করার প্রয়োজন হয়, তবে আপনাকে logcat বা Xcode debugger ব্যবহার করতে হতে পারে।

Android এর জন্য:

adb logcat *:E

iOS এর জন্য:

Xcode এর built-in debugger ব্যবহার করুন।

কিছু জনপ্রিয় Third-party Native Libraries

• react-native-camera: ক্যামেরা ব্যবহারের জন্য।
• react-native-maps: ম্যাপ এবং জিওলোকেশন ফিচার ইন্টিগ্রেট করতে।
• react-native-firebase: Firebase সেবাগুলি (অথেন্টিকেশন, মেসেজিং, ডাটাবেস) ইন্টিগ্রেট করতে।
• react-native-push-notification: পুশ নোটিফিকেশন যোগ করতে।
• react-native-sound: সাউন্ড এবং অডিও ফিচার ইন্টিগ্রেট করতে।
• react-native-device-info: ডিভাইস ইনফরমেশন সংগ্রহ করতে।

সারাংশ

React Native তে third-party native libraries ইন্টিগ্রেট করলে আপনি আপনার অ্যাপের কার্যকারিতা বাড়াতে পারেন। লাইব্রেরি ইনস্টল এবং কনফিগার করার পর, আপনি সেই ফিচারটি সহজেই JavaScript কোডের মাধ্যমে ব্যবহার করতে পারেন। পারমিশন ম্যানেজমেন্ট এবং সঠিক কনফিগারেশন করা গুরুত্বপূর্ণ, এবং বিভিন্ন ডিভাইস এবং প্ল্যাটফর্মে অ্যাপটি সঠিকভাবে কাজ করছে কিনা তা পরীক্ষা করতে হবে।